<!DOCTYPE html>
<html lang="en">
<head>
    {% block meta %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="home" href="/">
    {% endblock %}

    <title>
        {% block title %}{% endblock %}
    </title>

    {% block stylesheets %}
        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/reset.css') }}">
        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base.css') }}">

        {% for stylesheet in show_stylesheets() %}
            <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/' ~ stylesheet) }}">
        {% endfor %}
    {% endblock %}

    {% for arr in handle_event('ShowHeadElements', app.request) %}
        {# Only one element, but has dynamic value, can't access it directly #}
        {% for type, element in arr %}
            <{{ type }} rel="{{ element['rel'] }}" type="{{ element['type'] }}" href="{{ element['href'] }}" title="{{ element['title'] }}">
        {% endfor %}
    {% endfor %}
</head>

<body class="bg">

<aside id="accessibility-menu">
    <h2 id="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2>
    <h3 tabindex="0">{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</h3>

    <br>

    <p tabindex="0">{{ 'Provided the following keyboard shortcut, the link is targeted.' | trans }}</p>
    <p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}
    </p>

    <p tabindex="0">
        {% if is_firefox() == true %}
            <em><kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
        {% else %}
            <em><kbd>Alt</kbd> + "access key"</em>
        {% endif %}
    </p>

    <a accesskey="z" href="#anchor-accessibility-menu" class="anchor-hidden"></a>
    <a id="anchor-accessibility-menu" class="anchor-hidden"></a>

    <p tabindex="0">
        <strong>{{ 'The keyboard key ' | trans }}<kbd>Z</kbd>{{ ' accesses this menu.' | trans }}</strong>
        <strong>{{ 'The other access keys are:' | trans }}</strong>
    </p>

    <nav>
        <ul>
            <li><a href="#anchor-left-panel" accesskey="h"><kbd>H</kbd>{{ ' for the Left panel.' | trans }}</a></li>
            <li><a href="#anchor-main-content" accesskey="k"><kbd>K</kbd>{{ ' for the main content.' | trans }}</a></li>
            <li><a href="#anchor-main-page" accesskey="j"><kbd>J</kbd>{{ ' for the main page.' | trans }}</a></li>
            <li><a href="#anchor-right-panel" accesskey="l"><kbd>L</kbd>{{ ' for the right panel.' | trans }}</a></li>
        </ul>
    </nav>
</aside>

{% block header %}
    <header id='header' role="banner">
        {{ block("leftpanel", "stdgrid.html.twig") }}

        <a role="navigation" id="anchor-main-page" class="anchor-hidden"
           title="{{ 'Press tab to access selected region!' | trans }}"></a>
        <a class="accessibility-target" id='instance' href="{{ path('main_public') }}" tabindex="0"
           title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
            <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
        </a>

        {% if app.user %}
            {{ block("rightpanel", "stdgrid.html.twig") }}
        {% endif %}
    </header>
{% endblock header %}

<div class="container">
    <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
       title="{{ 'Press tab to access selected region!' | trans }}"></a>
    <div class='content accessibility-target'>
        {% block nav %}{% endblock %}
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock javascripts %}
    </div>
</div>
</body>
</html>

